<template>
	<view>
		<scroll-view scroll-x scroll-with-animation class="tab-view" :scroll-left="scrollLeft">
			<view v-for="(item,index) in tabbar" :key="index" class="tab-bar-item" :class="[currentTab==index ? 'active' : '']"
			 :data-current="index" @tap.stop="swichNav">
				<text class="tab-bar-title">{{item}}</text>
			</view>
		</scroll-view>
		<view class="main" v-if="currentTab == 0">
			<view v-for="(item, index) in shopList" :key="index" class="li">
				<view class="top">
					<view class="top-left">
						<image class="shop" src="/static/remao_shop/img/openShop.png"></image>
						<view class="shop-name">{{item.store_name}}</view>
						<image class="exit" src="/static/remao_shop/img/arrow_icon.png"></image>
					</view>
					<!-- <view class='daikanj'>待砍价，差5元</view> -->
				</view>
				<view class="content">
					<view class="con-top" @tap="jixu" :data-index="index">
						<image :src="item.item[0].img"></image>
						<view class="con-con">
							<view class="name">{{item.item[0].name}}</view>
							<!-- <view class='color'>重量：5.48kg规格:红心挂</view> -->
							<view class="biaoq">支持7天退换</view>
						</view>
						<view class="money">
							<view>￥{{item.item[0].goods_total}}</view>
							<view class="yuanj">￥{{item.item[0].price}}</view>
							<view class="shul">x{{item.goods_count}}</view>
						</view>
					</view>
					<view class="con-bot">共1件商品，合计：￥
						<text>{{item.item[0].goods_total}}</text> </view>
				</view>
				<view class="bottomd" v-if="item.status == 5">
					<view>已完成</view>
				</view>
				<view class="bottomd" v-if="item.status == 2">
					<view>订单待发货</view>
				</view>
				<view class="bottom" v-if="item.status == 9">
					<view>订单已取消</view>
				</view>
				<view class="bottom" v-if="item.status == 1">
					<button hover-class="none" @tap="quxiao" :data-index="index">取消订单</button>
					<button class="but" hover-class="none" :data-index="index" @tap="toPay">立即付款</button>
				</view>
			</view>
			<view v-if="noshop" class="noshop">没有更多了..</view>
		</view>
		<view class="main" v-if="currentTab == 1">
			<view v-for="(item, index) in shopList" :key="index" class="li">
				<view class="top">
					<view class="top-left">
						<image class="shop" src="/static/remao_shop/img/openShop.png"></image>
						<view class="shop-name">{{item.store_name}}</view>
						<image class="exit" src="/static/remao_shop/img/arrow_icon.png"></image>
					</view>
					<!-- <view class='daikanj'>待砍价，差5元</view> -->
				</view>
				<view class="content">
					<view class="con-top" @tap="jixu" :data-index="index">
						<image :src="item.item[0].img"></image>
						<view class="con-con">
							<view class="name">{{item.item[0].name}}</view>
							<!-- <view class='color'>重量：5.48kg规格:红心挂</view> -->
							<view class="biaoq">支持7天退换</view>
						</view>
						<view class="money">
							<view>￥{{item.item[0].goods_total}}</view>
							<view class="yuanj">￥{{item.item[0].price}}</view>
							<view class="shul">x{{item.goods_count}}</view>
						</view>
					</view>
					<view class="con-bot">共1件商品，合计：￥
						<text>{{item.item[0].goods_total}}</text>(含运费￥0.00) </view>
				</view>
				<view class="bottom">
					<button hover-class="none" @tap="quxiao" :data-index="index">取消订单</button>
					<button class="but" hover-class="none" :data-index="index" @tap="toPay">立即付款</button>
				</view>
			</view>
			<view v-if="noshop" class="noshop">没有更多了..</view>
		</view>
		<view class="main" v-if="currentTab==2">
			<view v-for="(item, index) in shopList" :key="index" class="li">
				<view class="top">
					<view class="top-left">
						<image class="shop" src="/static/remao_shop/img/openShop.png"></image>
						<view class="shop-name">{{item.store_name}}</view>
						<image class="exit" src="/static/remao_shop/img/arrow_icon.png"></image>
					</view>
					<!-- <view class='daikanj'>待砍价，差5元</view> -->
				</view>
				<view class="content">
					<view class="con-top" @tap="jixu" :data-index="index">
						<image :src="item.item[0].img"></image>
						<view class="con-con">
							<view class="name">{{item.item[0].name}}</view>
							<!-- <view class='color'>重量：5.48kg规格:红心挂</view> -->
							<view class="biaoq">支持7天退换</view>
						</view>
						<view class="money">
							<view>￥{{item.item[0].goods_total}}</view>
							<view class="yuanj">￥{{item.item[0].price}}</view>
							<view class="shul">x{{item.goods_count}}</view>
						</view>
					</view>
					<view class="con-bot">共1件商品，合计：￥
						<text>{{item.item[0].goods_total}}</text>(含运费￥0.00) </view>
				</view>
				<view class="bottomd" v-if="item.status == 2">
					<view>订单待发货</view>
				</view>
				<!-- <view class='bottom'>
		      <button hover-class="none" bindtap='jixu'>取消订单</button>
		      <button class='but' hover-class="none" bindtap='jixu'>立即付款</button>
		   </view> -->
			</view>
			<view v-if="noshop" class="noshop">没有更多了..</view>
		</view>
		<view class="main" v-if="currentTab==3">
			<view v-for="(item, index) in shopList" :key="index" class="li">
				<view class="top">
					<view class="top-left">
						<image class="shop" src="/static/remao_shop/img/openShop.png"></image>
						<view class="shop-name">{{item.store_name}}</view>
						<image class="exit" src="/static/remao_shop/img/arrow_icon.png"></image>
					</view>
					<!-- <view class='daikanj'>待砍价，差5元</view> -->
				</view>
				<view class="content">
					<view class="con-top" @tap="jixu" :data-index="index">
						<image :src="item.item[0].img"></image>
						<view class="con-con">
							<view class="name">{{item.item[0].name}}</view>
							<!-- <view class='color'>重量：5.48kg规格:红心挂</view> -->
							<view class="biaoq">支持7天退换</view>
						</view>
						<view class="money">
							<view>￥{{item.item[0].goods_total}}</view>
							<view class="yuanj">￥{{item.item[0].price}}</view>
							<view class="shul">x{{item.goods_count}}</view>
						</view>
					</view>
					<view class="con-bot">共1件商品，合计：￥
						<text>{{item.item[0].goods_total}}</text>(含运费￥0.00) </view>
				</view>
				<!-- <button hover-class="none" bindtap='jixu'>取消订单</button> -->
				<view class="bottom">
					<button class="but" :data-index="index" @tap="wuliu">查看物流</button>
					<button class="but" hover-class="none" :data-index="index" @tap="queren">确认收货</button>
				</view>
			</view>
			<view v-if="noshop" class="noshop">没有更多了..</view>
		</view>
		<view class="main" v-if="currentTab==4">
			<view v-for="(item, index) in shopList" :key="index" class="li">
				<view class="top">
					<view class="top-left">
						<image class="shop" src="/static/remao_shop/img/openShop.png"></image>
						<view class="shop-name">{{item.store_name}}</view>
						<image class="exit" src="/static/remao_shop/img/arrow_icon.png"></image>
					</view>
					<!-- <view class='daikanj'>待砍价，差5元</view> -->
				</view>
				<view class="content">
					<view class="con-top" @tap="jixu" :data-index="index">
						<image :src="item.item[0].img"></image>
						<view class="con-con">
							<view class="name">{{item.item[0].name}}</view>
							<!-- <view class='color'>重量：5.48kg规格:红心挂</view> -->
							<view class="biaoq">支持7天退换</view>
						</view>
						<view class="money">
							<view>￥{{item.item[0].goods_total}}</view>
							<view class="yuanj">￥{{item.item[0].price}}</view>
							<view class="shul">x{{item.goods_count}}</view>
						</view>
					</view>
					<view class="con-bot">共1件商品，合计：￥
						<text>{{item.item[0].goods_total}}</text>(含运费￥0.00) </view>
				</view>
				<view class="bottomd" v-if="item.status == 2">
					<view>已完成</view>
				</view>
				<!-- <view class='bottom'>
		      <button hover-class="none" bindtap='jixu'>取消订单</button>
		      <button class='but' hover-class="none" bindtap='jixu'>立即付款</button>
		   </view> -->
			</view>
			<view v-if="noshop" class="noshop">没有更多了..</view>
		</view>
		<view class="zanwu" v-if="zanwushangp">
			<image src="/static/remao_shop/img/noData.png"></image>
			<view>暂无相关订单</view>
		</view>
	</view>
</template>

<script>
	// hotmall/packageC/bargainorders/bargainorders.js
	import api from "../../../api";
	var app = getApp();

	export default {
		data() {
			return {
				page: 1,
				shopList: [],
				uid: '',
				active: 0,
				status: '',
				noshop: false,
				zanwushangp: false,
				order_sn: '',
				type: 5,
				payMoney: '',
				payType: 5,
				openId: '',
				order_id: '',
				currentTab: 0,
				tabbar: ['全部', '待付款', '代发货', '待收货', '已完成']
			};
		},

		components: {},
		props: {},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			let openid = wx.getStorageSync("openid");
			this.setData({
				openId: openid
			});
			wx.getStorage({
				key: 'userId',
				success: res => {
					console.log(res);
					this.setData({
						uid: res.data
					});
					this.getList();
				}
			});
		},

		/**
		 * 生命周期函数--监听页面初次渲染完成
		 */
		onReady: function() {},

		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow: function() {
			this.getList();
		},

		/**
		 * 生命周期函数--监听页面隐藏
		 */
		onHide: function() {},

		/**
		 * 生命周期函数--监听页面卸载
		 */
		onUnload: function() {},

		/**
		 * 页面相关事件处理函数--监听用户下拉动作
		 */
		onPullDownRefresh: function() {
			this.onLoad();
			wx.stopPullDownRefresh();
		},

		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function() {
			this.setData({
				page: this.page + 1
			});
			this.getList();
		},

		/**
		 * 用户点击右上角分享
		 */
		onShareAppMessage: function() {},
		methods: {
			getList: function() {
				app.globalData.request({
					// url: 'https://hotmall.shiliucrm.com/api/bargain/order_list',
					url: api.default.bargain_order_list,
					header: {
						'content-type': 'application/x-www-form-urlencoded' // 'content-type': 'application/json'

					},
					data: {
						user_id: this.uid,
						status: this.status,
						page: this.page
					},
					method: 'POST',
					success: res => {
						wx.hideLoading();
						console.log(res);

						if (this.page == 1 && res.order_list.length == 0) {
							this.setData({
								zanwushangp: true
							});
						} else this.setData({
							zanwushangp: false
						});

						if (this.page == 1) {
							this.setData({
								shopList: res.order_list
							});
						} else {
							if (res.order_list.length == 0) {
								this.setData({
									noshop: true
								});
							} else {
								var shop = this.shopList;

								for (let i = 0; i < res.order_list.length; i++) {
									shop.push(shop[i]);
								}

								this.setData({
									shopList: shop
								});
							}
						}

						if (this.shopList.length == 0) {
							this.setData({
								noshop: false
							});
						}

						console.log(this.noshop);
					}
				});
			},

			swichNav: function(e) {
				this.setData({
					page: 1,
					noshop: false
				});
				let cur = e.currentTarget.dataset.current;
				if (this.currentTab == cur) {
					return false;
				} else {
					this.currentTab = cur
				}
				if (cur == 1) {
					this.setData({
						status: 1
					});
				} else {
					if (cur == 2) {
						this.setData({
							status: 2
						});
					} else {
						if (cur == 3) {
							this.setData({
								status: 4
							});
						} else {
							if (cur == 4) {
								this.setData({
									status: 5
								});
							} else {
								if (cur == 0) {
									this.setData({
										status: ''
									});
								}
							}
						}
					}
				}

				wx.showLoading({
					title: '加载中'
				});
				this.getList();
			},

			onChange(event) {
				this.setData({
					page: 1,
					noshop: false
				});

				if (event.detail.index == 1) {
					this.setData({
						status: 1
					});
				} else {
					if (event.detail.index == 2) {
						this.setData({
							status: 2
						});
					} else {
						if (event.detail.index == 3) {
							this.setData({
								status: 4
							});
						} else {
							if (event.detail.index == 4) {
								this.setData({
									status: 5
								});
							} else {
								if (event.detail.index == 0) {
									this.setData({
										status: ''
									});
								}
							}
						}
					}
				}

				wx.showLoading({
					title: '加载中'
				});
				this.getList(); // wx.showToast({
				//    title: `切换到标签 ${event.detail.index + 1}`,
				//    icon: 'none'
				// });
			},

			// 去支付
			toPay: function(e) {
				console.log(e.currentTarget.dataset.index);
				let index = e.currentTarget.dataset.index;
				this.setData({
					order_sn: this.shopList[index].order_sn,
					payMoney: this.shopList[index].total_price,
					order_id: this.shopList[index].order_id
				}); // 调起微信支付

				this.weixinPayMoney(); // wx.navigateTo({
				//   url: '../../packageA/pay/pay?order=' + this.data.orderList[index].order_sn + '&type=2&money=' + this.data.orderList[index].total_price + '&userId=' + this.data.userId
				// })
			},
			wuliu: function() {
				let index = e.currentTarget.dataset.index;
				var id = this.shopList[index].order_sn;
				wx.navigateTo({
					url: '../../packageC/express/express?sn=' + id
				});
			},

			// 微信支付
			weixinPayMoney() {
				var _that = this; // console.log(_that.data.order)
				// console.log(_that.data.type)
				// console.log(_that.data.payMoney)


				app.globalData.request({
					url: api.fyz.weixinPay,
					data: {
						type: _that.payType,
						pay_sn: _that.order_sn,
						money: _that.payMoney,
						openid: _that.openId
					},
					header: {
						'content-type': 'application/x-www-form-urlencoded' // 默认值

					},
					method: 'POST',
					success: res => {
						console.log(res);
						var prepayid = res.ioswx_config.prepayid,
							osn = res.osn;
						console.log('支付id:', prepayid); //  付款成功

						if (res.status == 1) {
							wx.requestPayment({
								appId: res.weixin_config.appid,
								nonceStr: res.weixin_config.nonce_str,
								package: 'prepay_id=' + res.weixin_config.prepay_id,
								signType: 'MD5',
								timeStamp: res.weixin_config.timestamp,
								paySign: res.weixin_config.sign,
								success: function(res1) {
									wx.getStorage({
										key: 'userId',
										success: function(aaa) {
											console.log(aaa.data);
											var open = aaa.data;
											console.log(open);
											app.globalData.request({
												url: api.gzSea.message,
												//仅为示例，并非真实的接口地址
												data: {
													sole: prepayid,
													order_sn: osn,
													user_id: open
												},
												method: 'POST',
												header: {
													'content-type': 'application/x-www-form-urlencoded' // 默认值

												},

												success(res) {
													console.log(res);
												}

											});
										}
									}); //  更新订单状态

									app.globalData.request({
										url: api.default.bargainorder_update_pay,
										data: {
											order_id: _that.order_id
										},
										header: {
											'content-type': 'application/x-www-form-urlencoded' // 默认值

										},
										method: 'POST',
										success: res => {
											console.log(res);

											if (res.status == 1) {
												console.log(_that.userId);

												_that.getList(); // wx.redirectTo({
												//   url: '../../packageB/order/order?status=0&userId=' + _that.data.userId,
												// })
												// wx.removeStorageSync('couponId')

											} else {
												wx.showToast({
													title: res.msg,
													duration: 1000
												});
											}
										}
									});
								},
								fail: function(res2) {
									wx.showToast({
										title: '支付失败，请重新支付',
										icon: 'none',
										duration: 1000
									});
								}
							});
						}
					},
					fail: function(ret) {
						console.log(ret);
					},
					complete: function(reb) {
						console.log(reb);
					}
				});
			},

			//确认收货
			queren: function(e) {
				var that = this;
				console.log(e.currentTarget.dataset.index);
				let index = e.currentTarget.dataset.index;
				wx.showModal({
					content: '您确定要收货吗？',

					success(res) {
						if (res.confirm) {
							app.globalData.request({
								url: api.default.bargaincollect_order,
								header: {
									'content-type': 'application/x-www-form-urlencoded' // 'content-type': 'application/json'

								},
								data: {
									order_id: that.shopList[index].order_id
								},
								method: 'POST',
								success: res => {
									if (that.page != 1) {
										that.setData({
											shopList: '',
											page: 1,
											noshop: false
										});
									}

									that.getList();
									wx.showToast({
										title: res.msg,
										icon: 'none'
									});
								}
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}

				});
			},
			//取消订单
			quxiao: function(e) {
				var that = this;
				console.log(e.currentTarget.dataset.index);
				let index = e.currentTarget.dataset.index;
				wx.showModal({
					title: '提示',
					content: '订单还未付款，确定要取消吗？',

					success(res) {
						if (res.confirm) {
							app.globalData.request({
								url: api.default.bargaincancel_order,
								header: {
									'content-type': 'application/x-www-form-urlencoded' // 'content-type': 'application/json'

								},
								data: {
									order_id: that.shopList[index].order_id
								},
								method: 'POST',
								success: res => {
									if (that.page != 1) {
										that.setData({
											shopList: '',
											page: 1,
											noshop: false
										});
									}

									that.getList();
									wx.showToast({
										title: res.msg,
										icon: 'none'
									});
								}
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}

				});
			},
			//跳转砍价页面
			jixu: function(e) {
				console.log(e.currentTarget.dataset.index);
				wx.navigateTo({
					url: '../../packageA/orderdetail/orderdetail?order_sn=' + this.shopList[e.currentTarget.dataset.index].order_id +
						'&iskan=' + '1' + '&userId=' + this.uid
				});
			}
		}
	};
</script>
<style>
	@import "./bargainorders.css";

	::-webkit-scrollbar {
		width: 0;
		height: 0;
		color: transparent;
	}

	.tab-view::before {
		content: '';
		position: absolute;
		border-bottom: 1upx solid #eaeef1;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
		bottom: 0;
		right: 0;
		left: 0;
	}

	.tab-view {
		width: 100%;
		height: 100upx;
		overflow: hidden;
		box-sizing: border-box;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99;
		background: #fff;
		white-space: nowrap;
	}

	.tab-bar-item {
		padding: 0 10upx;
		width: 120upx;
		height: 100upx;
		min-width: 80upx;
		line-height: 100upx;
		margin: 0 20upx;
		display: inline-block;
		text-align: center;
		box-sizing: border-box;
	}

	.tab-bar-title {
		height: 100upx;
		line-height: 100upx;
		font-size: 28upx;
		color: #999;
		font-weight: 400;
	}

	.active {
		border-bottom: 6upx solid #e51f54;
	}

	.active .tab-bar-title {
		color: #333 !important;
		font-size: 28upx;
		font-weight: 500;
	}

	.main {
		margin-top: 100upx;
	}
</style>
